<template>
	<view class="emtpy" :class="[fullPage ? 'fullPage' : null]">
		<template v-if="type == 'empty'">
			<image class="empty_img" src="../static/emtpy/empty.png" mode=""></image>
			<view class="text">{{ message || '暂时还没有内容，请在等等吧！'}}</view>
		</template>
		<template v-else-if="type == 'address'">
			<image class="empty_img" src="../static/emtpy/empty_address.png" mode=""></image>
			<view class="text">{{ message || '获取位置信息失败，请重新加载！'}}</view>
		</template>
		<template v-else-if="type == 'wifi'">
			<image class="empty_img" src="../static/emtpy/empty_wifi.png" mode=""></image>
			<view class="text">{{ message || '网络连接异常，请检查您的网络！'}}</view>
		</template>
		<template v-else-if="type == 'data'">
			<image class="empty_img" src="../static/emtpy/empty_data.png" mode=""></image>
			<view class="text">{{ message || '数据加载失败，请重新加载！'}}</view>
		</template>
		<template v-else-if="type == 'space'">
			<image class="empty_img" src="../static/emtpy/empty_space.png" mode=""></image>
			<view class="text">{{ message || '抱歉，您暂未创建属于自己的空间'}}</view>
		</template>
		<template v-else-if="type == 'comment'">
			<image class="empty_img" src="../static/emtpy/empty_comment.png" mode=""></image>
			<view class="text">{{ message || '暂无评论'}}</view>
		</template>
		<template v-else-if="type == 'loading'">
			<image class="empty_img" src="../static/emtpy/empty_loading.png" mode=""></image>
			<view class="text">{{ message || '加载中...'}}</view>
		</template>
		<view class="empty_btn" v-if="showButton">
			<button type="default" @click="onReload">{{ buttonText }}</button>
		</view>
	</view>
</template>

<script>
	export default {
		name:"empty",
		props: {
			type: {
				type: String,
				default() {
					return 'empty'
				}
			},
			// 是否显示底部按钮
			showButton: {
				type: Boolean,
				default() {
					return true
				}
			},
			buttonText: {
				type: String,
				default() {
					return '重新加载'
				}
			},
			message: {
				type: String,
				default() {
					return null
				}
			},
			fullPage: {
				type: Boolean,
				default() {
					return false
				}
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			// 重新加载
			onReload() {
				this.$emit('onReload')
			}
		}
	}
</script>

<style lang="less" scoped>
.fullPage {
	height: 85vh;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
.empty {
	padding: 32rpx 0;
}
.empty_img, .text, .empty_btn {
	margin: 0 auto;
	text-align: center;
}
.empty_img {
	width: 360rpx;
	height: 360rpx;
}
.text {
	font-size: 28rpx;
	color: #666666;
	padding-top: 32rpx;
}
.empty_btn {
	padding-top: 48rpx;
	button {
		border-radius: 36rpx;
		background-color: #FED034 !important;
		color: #333333;
		font-size: 28rpx;
		margin: 0 auto;
		width: 352rpx;
		height: 96rpx;
		line-height: 96rpx;
		opacity: 1;
		border-radius: 48rpx;
		font-size: 32rpx;
	}
}
</style>
